// Global tool style class

.full-card-body-container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  overflow-y: auto;
}

.text-black-shadow {
  text-shadow:
    6px -4px 15px #303030,
    -7px 7px 15px #161616;
}

.text-white-shadow {
  text-shadow:
    6px -4px 15px #e6dede,
    -7px 7px 15px #e2e2e2;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.flex-around {
  display: flex;
  justify-content: space-around;
}

.flex-evenly {
  display: flex;
  justify-content: space-evenly;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-absolute-right {
  position: absolute;
  right: 0;
}

.position-absolute-left {
  position: absolute;
  left: 0;
}

.position-absolute-top {
  position: absolute;
  top: 0;
}

.position-absolute-bottom {
  position: absolute;
  bottom: 0;
}

.direction-column {
  flex-direction: column;
}

.align-center {
  display: flex;
  align-items: center;
}

.justify-center {
  display: flex;
  justify-content: center;
}

.justify-start {
  display: flex;
  justify-content: flex-start;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}

.justify-space-between {
  display: flex;
  justify-content: space-between;
}

.h-100 {
  height: 100% !important;
}

.h-50 {
  height: 50% !important;
}

.w-100 {
  width: 100% !important;
}

.w-50 {
  width: 50% !important;
}

.color-danger {
  color: var(--color-danger);
}

.color-primary {
  color: var(--color-primary);
}

.color-warning {
  color: var(--color-warning);
}

.color-success {
  color: var(--color-success);
}

.color-info {
  color: var(--color-info);
}

.transition-all-6 {
  transition: all 0.6s;
}

.transition-all-4 {
  transition: all 0.4s;
}

.app-max-width {
  max-width: var(--app-max-width);
  margin: auto;
}

.select-none {
  user-select: none;
}

.font-bolder {
  font-weight: bolder;
}

.items-center {
  align-items: center;
}

.items-flex-start {
  align-items: flex-start;
}

.m-auto {
  margin: auto;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.mb-auto {
  margin-bottom: auto;
}

.mt-auto {
  margin-top: auto;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.require-field {
  &::before {
    content: "*";
    color: red;
    margin-right: 4px;
  }
}

.overflow-hidden {
  overflow: hidden;
}

.dialog-overflow-container {
  max-height: 80vh;
  overflow-x: hidden;
}

.ellipsis-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin generate-styles($depth) {
  .m-#{$depth} {
    margin: #{$depth}px !important;
  }
  .ml-#{$depth} {
    margin-left: #{$depth}px !important;
  }
  .mr-#{$depth} {
    margin-right: #{$depth}px !important;
  }
  .mb-#{$depth} {
    margin-bottom: #{$depth}px !important;
  }
  .mt-#{$depth} {
    margin-top: #{$depth}px !important;
  }
  .p-#{$depth} {
    padding: #{$depth}px !important;
  }
  .pl-#{$depth} {
    padding-left: #{$depth}px !important;
  }
  .pr-#{$depth} {
    padding-right: #{$depth}px !important;
  }
  .pb-#{$depth} {
    padding-bottom: #{$depth}px !important;
  }
  .pt-#{$depth} {
    padding-top: #{$depth}px !important;
  }

  @if $depth >= 1 {
    @include generate-styles($depth - 1);
  }
}

@include generate-styles(60);
